<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>后台登陆</title>
    <base href="${basePath}">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .main {
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background: url("static/images/login-bg.png") no-repeat center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .main .form-div {
            width: 450px;
            padding: 30px 0;
            background-color: rgba(0, 0, 0, .4);
            border-radius: 20px;
        }

        .main .form-div h3 {
            text-align: center;
        }

        .login-container {
            width: 320px;
            margin: 21px auto 0;
        }

        .layui-form-checkbox[lay-skin=primary] > div {
            color: #dfdfdf;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="form-div">
        <h3>后台管理用户登陆</h3>
        <form class="layui-form">
            <div class="login-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
                               lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>
                        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
                               lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <div class="layui-input-wrap">
                                <div class="layui-input-prefix">
                                    <i class="layui-icon layui-icon-vercode"></i>
                                </div>
                                <input type="text" id="code" name="code" value="" lay-verify="required|code"
                                       placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off"
                                       class="layui-input" lay-affix="clear">
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img id="kaptcha" style="height: 40px;width: 120px" src="kaptcha.jpg"
                                     title="点击切换验证码" onclick="this.src='kaptcha.jpg?t='+ new Date().getTime();">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    $(function () {
        layui.use(function () {
            const form = layui.form;
            /*自定义验证*/
            form.verify({
                code(value) {
                    if (value.length !== 5) {
                        return "验证码长度不为5！";
                    }
                }
            });
            form.on("submit(login)", function (obj) {
                $.ajax({
                    url: "login",
                    method: "post",
                    data: obj.field,
                    dataType: "json",
                    success(res) {
                        if (res.code === 200) {
                            layer.msg('登录成功', {icon: 6}, function () {
                                sessionStorage.removeItem("active");
                                sessionStorage.removeItem("power")
                                location.replace("home")
                            });
                        } else {
                            layer.alert(res.msg, {icon: 5});
                            $("#code").val("");
                            $("#kaptcha").prop("src", "kaptcha.jpg?r=" + Math.random());
                        }
                    }
                })
                /*阻止表单提交*/
                return false;
            });
        })
    })
</script>
</html>
